<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <link href="./css/pauseAnimation.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      const streamingFormat = new URL(window.location.href).searchParams.get('streamingFormat') ?? 'channelData'; // can be entity or channelData

      function addLivestreamingMetadata(activity, livestreamingMetadata) {
        return streamingFormat === 'entity'
          ? {
              ...activity,
              entities: [...(activity.entities ?? []), { ...livestreamingMetadata, type: 'streaminfo' }]
            }
          : {
              ...activity,
              channelData: { ...activity.channelData, ...livestreamingMetadata }
            };
      }

      run(async function () {
        const {
          React: { createElement },
          ReactDOM: { render },
          WebChat: {
            Components: { ReactWebChat },
            decorator: { WebChatDecorator }
          }
        } = window; // Imports in UMD fashion.

        const streamId = crypto.randomUUID();
        const { directLine, store } = testHelpers.createDirectLineEmulator();

        // WHEN: Incoming activities dispatched before Web Chat subscribe to the store.
        store.dispatch({
          type: 'DIRECT_LINE/INCOMING_ACTIVITY',
          payload: {
            activity: addLivestreamingMetadata({
              from: {
                id: 'u-00001',
                name: 'Bot',
                role: 'bot'
              },
              id: streamId,
              text: 'Nisi elit quis nisi consectetur.',
              type: 'typing'
            }, { streamSequence: 1, streamType: 'informative' })
          }
        });

        store.dispatch({
          type: 'DIRECT_LINE/INCOMING_ACTIVITY',
          payload: {
            activity: addLivestreamingMetadata({
              from: {
                id: 'u-00001',
                name: 'Bot',
                role: 'bot'
              },
              id: crypto.randomUUID(),
              text: 'Ex nulla pariatur deserunt commodo enim laborum consequat officia proident.',
              type: 'message'
            }, { streamId, streamType: 'final' })
          }
        });

        // WHEN: Web Chat is rendered with 2 activities in the store.
        render(
          createElement(
            WebChatDecorator,
            {},
            createElement(ReactWebChat, {
              directLine,
              store,
              styleOptions: {
                typingAnimationBackgroundImage: `url('')`
              }
            })
          ),
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        // THEN: Should show 1 activity.
        expect(pageElements.activities()).toHaveLength(1);

        // THEN: Should match snapshot.
        await host.snapshot('local');
      });
    </script>
  </body>
</html>
